<template>
    <n-space vertical :wrap-item="false" class="h-100">
        <n-layout has-sider class="h-100">
            <n-layout-sider
                bordered
                collapse-mode="width"
                :collapsed-width="64"
                :width="240"
                :collapsed="collapsed"
                show-trigger
                @collapse="collapsed = true"
                @expand="collapsed = false"
            >
                <n-menu
                    v-model:value="activeKey"
                    :collapsed="collapsed"
                    :collapsed-width="64"
                    :collapsed-icon-size="22"
                    :options="menuOptions"
                />
            </n-layout-sider>
            <n-layout class="h-100" style="padding-left:5px">
                <slot name="default"></slot>
            </n-layout>
        </n-layout>
    </n-space>
</template>

<script lang="ts">
import {defineComponent, Component, computed, h, watch} from "vue";
import useMenuStore                                                from "frontend/src/store/modules/menu";
import { MenuOption, NIcon,} from "naive-ui";
import {RouterLink, useRoute}       from "vue-router";
import {
    BookOutline as BookIcon,
    HomeOutline as HomeIcon,
    FileTrayOutline as FileIcon,
}                                      from "@vicons/ionicons5";

import {
    StoreMicrosoft24Regular
} from "@vicons/fluent"

export default defineComponent({
    setup(){

        function renderIcon(icon: Component) {
            return () => h(NIcon, null, {default: () => h(icon)})
        }

        const menuStore = useMenuStore()

        const collapsed = computed({
            get:()=> menuStore.collapsed,
            set:(v)=>menuStore.setCollapsed(v)
        })

        // @ts-ignore
        const menuOptions = computed({
            get:()=> menuStore.options,
            set:(v:MenuOption[])=>menuStore.setOptions(v)
        })

        menuOptions.value = [
            {
                label: () =>
                    h(RouterLink, {
                        to: {
                            name: "home"
                        }
                    }, {
                        default: () => "首页"
                    })
                ,
                key: "home",
                icon: renderIcon(HomeIcon)
            },
            {
                label: () =>
                    h(RouterLink, {
                        to: {
                            name: "markdown"
                        }
                    }, {
                        default: () => "Markdown"
                    })
                ,
                key: "markdown",
                icon: renderIcon(BookIcon)
            },
            {
                label:()=>
                    h(RouterLink, {
                        to: {
                            name: "explorer"
                        }
                    }, {
                        default: () => "文件管理"
                    })
                ,
                key: "explorer",
                icon: renderIcon(FileIcon)
            },
            {
                label:()=>
                    h(RouterLink, {
                        to: {
                            name: "soft"
                        }
                    }, {
                        default: () => "软件"
                    })
                ,
                key: "soft",
                icon: renderIcon(StoreMicrosoft24Regular)
            }
        ]

        const activeKey = computed({
            get:()=> menuStore.active,
            set:(v)=>menuStore.setActive(v)
        })
        activeKey.value = "home"
        const route = useRoute()
        watch(route,()=>{
            activeKey.value = (String(route.name) || "")
        })

        return {
            menuOptions,
            collapsed,
            activeKey
        }
    }
})
</script>

<style scoped>

</style>